<template>
	<el-collapse v-model="activeNames">
		<el-collapse-item name="1">
			<template slot="title">
				<el-divider content-position="left">
					<view class="bold-text user-select-none">cc.Sprite</view>
				</el-divider>
			</template>
			<!-- enabled -->
			<el-row>
				<el-col :span="spacing">Enabled</el-col>
				<el-col :span="24-spacing">
					<el-checkbox v-model="treeItemData.spriteData.enabled" @change="handleChangeEnabled">启用</el-checkbox>
				</el-col>
			</el-row>
			<!-- type -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Type</el-col>
				<el-col :span="24-spacing">
					<el-select v-model="treeItemData.spriteData.type" placeholder="请选择" size="mini"
						@change="handleChangeType">
						<el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			<!-- sizeMode -->
			<el-row class="u-m-t-8" v-if="treeItemData.spriteData.type != 3">
				<el-col :span="spacing">SizeMode</el-col>
				<el-col :span="24-spacing">
					<el-select v-model="treeItemData.spriteData.sizeMode" placeholder="请选择" size="mini"
						@change="handleChangeSizeMode">
						<el-option v-for="item in sizeModeOptions" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			
			<view class="border-radius-4 u-m-t-8" v-if="treeItemData.spriteData.type == 3">
				<!-- FillType -->
				<el-row>
					<el-col :span="spacing">FillType</el-col>
					<el-col :span="24-spacing">
						<el-select v-model="treeItemData.spriteData.fillType" placeholder="请选择" size="mini"
							@change="handleChangeFillType">
							<el-option v-for="item in fillTypeOptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-col>
				</el-row>
				<!-- FillCenter -->
				<el-row class="u-m-t-8">
					<el-col :span="spacing">FillCenter</el-col>
					<el-col :span="24-spacing" class="ui-container">
						<el-tag size="medium" effect="plain">X</el-tag>
						<el-input-number :disabled="treeItemData.spriteData.fillType != 2" size="mini" v-model="treeItemData.spriteData.fillCenterX" controls-position="right" @change="changefillCenter" :min="0" :max="1" :step="0.1"></el-input-number>
						<view class="u-m-l-10">
							<el-tag size="medium" effect="plain">Y</el-tag>
							<el-input-number :disabled="treeItemData.spriteData.fillType != 2" size="mini" v-model="treeItemData.spriteData.fillCenterY" controls-position="right" @change="changefillCenter" :min="0" :max="1" :step="0.1"></el-input-number>
						</view>
					</el-col>
				</el-row>
				<!-- FillStart -->
				<el-row class="u-m-t-8">
					<el-col :span="spacing">FillStart</el-col>
					<el-col :span="24-spacing">
						<el-input-number size="mini" v-model="treeItemData.spriteData.fillStart" controls-position="right" @change="handleChangeFillStart" step-strictly :min="0" :max="1" :step="0.1"></el-input-number>
					</el-col>
				</el-row>
				<!-- FillRange -->
				<el-row class="u-m-t-8">
					<el-col :span="spacing">FillRange</el-col>
					<el-col :span="24-spacing">
						<el-input-number size="mini" v-model="treeItemData.spriteData.fillRange" controls-position="right" @change="handleChangeFillRange" step-strictly :min="0" :max="1" :step="0.1"></el-input-number>
					</el-col>
				</el-row>
			</view>
				
			<!-- trim -->
			<el-row class="u-m-t-8" v-if="treeItemData.spriteData.type == 0">
				<el-col :span="spacing">Trim</el-col>
				<el-col :span="24-spacing">
					<el-checkbox v-model="treeItemData.spriteData.trim" @change="handleChangeTrim">节点约束</el-checkbox>
				</el-col>
			</el-row>
			
			
			<view class="border-radius-4 u-m-t-8">
				<!-- SrcBlendFactor -->
				<el-row >
					<el-col :span="spacing">SrcBlendFactor</el-col>
					<el-col :span="24-spacing">
						<el-select v-model="treeItemData.spriteData.srcBlendFactor" placeholder="请选择" size="mini"
							@change="handleChangeSrcBlendFactor">
							<el-option v-for="item in blendFactorOptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-col>
				</el-row>
				<!-- dstBlendFactor -->
				<el-row class="u-m-t-8">
					<el-col :span="spacing">DstBlendFactor</el-col>
					<el-col :span="24-spacing">
						<el-select v-model="treeItemData.spriteData.dstBlendFactor" placeholder="请选择" size="mini"
							@change="handleChangeDstBlendFactor">
							<el-option v-for="item in blendFactorOptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-col>
				</el-row>
			</view>
		</el-collapse-item>
	</el-collapse>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "ui-sprite",
		props: [
		],
		computed: {
			...mapState({
				uuid: state => state.app.uuid,
				treeItemData: state => state.app.treeItemData,
			})
		},
		data() {
			return {
				activeNames: ['1'],
				spacing: 4,
				typeOptions: [{
					value: 0,
					label: 'SIMPLE-普通'
				}, {
					value: 1,
					label: 'SLISED-九宫'
				}, {
					value: 2,
					label: 'TILED-平铺'
				},{
					value: 3,
					label: 'FILLED-填充'
				},{
					value: 4,
					label: 'MESH'
				}],
				sizeModeOptions: [{
					value: 0,
					label: 'CUSTOM-自定义'
				}, {
					value: 1,
					label: 'TRIMMED-原始裁剪'
				}, {
					value: 2,
					label: 'RAW-原始未裁剪'
				}],
				fillTypeOptions: [{
					value: 0,
					label: 'HORIZONTAL'
				}, {
					value: 1,
					label: 'VERTICAL'
				}, {
					value: 2,
					label: 'RADIAL'
				}],
				blendFactorOptions: [{
					value: 0,
					label: 'ZERO'
				}, {
					value: 1,
					label: 'ONE'
				}, {
					value: 772,
					label: 'DST_ALPHA'
				}, {
					value: 774,
					label: 'DST_COLOR'
				}, {
					value: 773,
					label: 'ONE_MINUS_DST_ALPHA'
				}, {
					value: 775,
					label: 'ONE_MINUS_DST_COLOR'
				}, {
					value: 771,
					label: 'ONE_MINUS_SRC_ALPHA'
				}, {
					value: 769,
					label: 'ONE_MINUS_SRC_COLOR'
				}, {
					value: 770,
					label: 'SRC_ALPHA'
				}, {
					value: 768,
					label: 'SRC_COLOR'
				}],
				
			};
		},
		methods: {
			pluginSetNodeData(key, value, isNumber) {
				this._evalCode(
					"window.pluginSetNodeSpriteData(" +
					"'" + this.uuid + "'," +
					"'" + key + "'," +
					"'" + value + "'," +
					"'" + isNumber + "'" +
					")");
				this._freshNode();
			},
			handleChangeEnabled(value) {
				this.pluginSetNodeData('enabled', value);
			},
			handleChangeType(value) {
				this.pluginSetNodeData('type', value, true);
			},
			handleChangeSizeMode(value) {
				this.pluginSetNodeData('sizeMode', value, true);
			},
			handleChangeFillType(value) {
				this.pluginSetNodeData('fillType', value, true);
			},
			handleChangeFillStart(value) {
				this.pluginSetNodeData('fillStart', value, true);
			},
			handleChangeFillRange(value) {
				this.pluginSetNodeData('fillRange', value, true);
			},
			handleChangeTrim(value) {
				this.pluginSetNodeData('trim', value);
			},
			handleChangeSrcBlendFactor(value) {
				this.pluginSetNodeData('srcBlendFactor', value, true);
			},
			handleChangeDstBlendFactor(value) {
				this.pluginSetNodeData('dstBlendFactor', value, true);
			},
			changefillCenter(value) {
				this._evalCode(
					"window.pluginSetNodeSpriteFillCenter(" +
					"'" + this.uuid + "'," +
					"'" + this.treeItemData.spriteData.fillCenterX + "'," +
					"'" + this.treeItemData.spriteData.fillCenterY + "'" +
					")");
				this._freshNode();
			}
		}
	}
</script>

<style>
	.el-collapse {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		border-radius: 4px;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		overflow: hidden;
		color: #303133;
		-webkit-transition: .3s;
		transition: .3s;
		border-top: none;
		border-bottom: none;
		padding: 0px 15px;
		margin-top: 10px;
	}
	
	.el-input-number /deep/ .el-input__inner {
		padding-left: 5px;
		padding-right: 40px;
	}
	
	/deep/ .el-tag--plain {
		background-color: #fff;
		border-color: #DCDFE6;
		color: #000;
	}
	.border-radius-4{
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		padding: 10px;
	}
</style>